<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Real Estate Builders Free Responsive Website Templates - icon">
    <meta name="author" content="webThemez.com">
    <title>欢迎来到拴马桩</title>
    <link rel="favicon" href="assets/images/favicon.png">
    <link rel="stylesheet" media="screen" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/bootstrap-theme.css" media="screen">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script th:src="@{/webjars/jquery/3.6.0/dist/jquery.js}"></script>
    <link rel="shortcut icon" href="Imperial/assets/img/logo.php">
    <link rel="stylesheet" type="text/css" href="assets/css/ShoppingCart.css"/>
    <link rel="stylesheet" th:href="@{/webjars/layui/2.5.7/css/layui.css}">
    <script th:src="@{/webjars/layui/2.5.7/layui.js}"></script>
    <style type="text/css">
        #imgset{
            background-image: url("/saveimage/back.png");
            height: 180px;
        }
    </style>
</head>

<body >
<!-- Fixed navbar -->
<div th:replace="~{commons/commons::topbar(active='loan')}"></div>
<!-- /.navbar -->

<header id="head" class="secondary">
    <div class="container">
        <div class="row">
            <div class="col-sm-8">
                <h1>Services</h1>
            </div>
        </div>
    </div>
</header>
<link rel="canonical" href="https://bj.lianjia.com/yezhu/maifang/"/>
<link rel="stylesheet" href="https://s1.ljcdn.com/feroot/pc/asset/yezhu/maifang/index.css?_v=20210727193349819">
<div id="app">

    <br>

    <div>
    <div id="imgset"  ><br ><h1 ><br>贷款申请</h1></div>
    <br>
    <div style="width: 500px;align-content: center;float: left" th:align="center" >
    <el-form ref="form" :model="form" label-width="160px">
        <el-form-item label="真实姓名">
            <el-input v-model="form.name" label-width="10px"></el-input>
        </el-form-item>
        <el-form-item label="现住址">
            <el-input v-model="form.address" label-width="10px"></el-input>
        </el-form-item>

        <el-form-item label="联系方式">
            <el-input v-model="form.contact" label-width="10px"></el-input>
        </el-form-item>
        <el-form-item label="贷款公司">
            <el-select v-model="form.company" placeholder="请选择贷款公司">
                <el-option label="栓马银行" value="栓马银行"></el-option>
                <el-option label="人人贷" value="人人贷"></el-option>
                <el-option label="栓马贷贷" value="栓马贷贷"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="贷款金额">
            <el-input v-model="form.money" label-width="10px"></el-input>
        </el-form-item>
        <el-form-item label="我已详细阅读并同意">
            <el-switch v-model="form.delivery"></el-switch><a v-on:click="LoanAgreement" style="color: green">&nbsp;&nbsp;&nbsp;贷款说明</a>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即贷款</el-button>
        </el-form-item>
    </el-form>
    </div>
    <div style="float: right">
        <img height="500px" src="/images/gg.webp">
    </div>
    </div>

</div>

</body>
</html>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {form: {
        name: '',
                address:'',
                contact:'',
                company: '',
                money:'',
            delivery: false,
    }},
        methods:{
            LoanAgreement(){
                this.$alert('贷款业务：借款方依照有关规定，按期将一定数额的货币及其利息返还给贷款方，确定相互权利义务关系的协议。' +
                    '利息计算为日利率为0.05%,利率为每天的下午10点结算。计算公式为：（本金+利息）*日利率'
                    , '贷款说明', {
                    confirmButtonText: '确定',
                    callback: action => {
                    }
                });
            },
            open(){
        this.$alert('如果借款人将贷款用于非法用途，如果违反国家法律、行政法规的禁止性规范，将导致贷款合同无效。即使贷款人在贷款的使用时对此非法目的尚不知情，一旦贷款人知悉此非法目的后，必须阻止借款人继续提款。其次，限制贷款用途是为了保证还款资金的来源。如果贷款不按协议的用途加以运用，' +
            '借款人可能因经营不当导致丧失还款能力。再者，贷款行内部经营方针可能对发放贷款的行业或部门有限制，政府规则、法令有时也有类似规定。最后，限制贷款的用途还可能因为是涉及第三人的利益，比如在出口信贷项目中，贷款用途就仅限于特定的支付对象。', '贷款协议', {
            confirmButtonText: '确定',
            callback: action => {
            }
        })
    },
            onSubmit() {
                if(this.form.name==''||this.form.address==''||this.form.contact==''||this.form.company==''||this.form.money==''){
                    this.$message({
                        message: '选项不能为空',
                        type: 'error'
                    });
                    return;
                }
                if (this.form.delivery==false){

                    this.$message({
                        message: '请勾选上方的服务协议',
                        type: 'error'
                    });

                }else{
                    if(this.form.money<5000){
                        this.$message({
                            message: '贷款金额不能小于5000',
                            type: 'error'
                        });
                    }else{
                    $.ajax({
                        url:"/addLoan",
                        data:{
                            'name':this.form.name,
                            'address':this.form.address,
                            'contact':this.form.contact,
                            'company': this.form.company,
                            'money':this.form.money,
                        },
                        method: "post",
                        success: function (data){
                            layui.use('layer',function (){
                                layer.msg(data);
                            })


                        }
                    })
                        this.form.name='',
                            this.form.address='',
                            this.form.contact='',
                            this.form.company='',
                            this.form.money=''
                }}
            }
        },
        beforeMount(){
            this.open();
        }
    })


</script>
